<template>
	<view class="login_bg">
		<view class="login_lay">
			<view style="position: absolute;bottom: 10px;left: 10px;z-index: 2;" @click="changeLang">
				{{$t('login.changeLang')}}
			</view>

			<view class="left_lay">
				<image class="login_img" src="/static/imgs/login/pic_login_bg@2x.png"></image>
			</view>
			<view class="right_lay">
				<view class="icon_set" @click="onLoginSettingClick">
					<image src="/static/imgs/login/icon_setting.png"></image>
				</view>
				<view class="right_title">{{$t('login.loginStr')}}</view>
				<view class="input_lay">
					<view class="input_title">{{$t('login.checker')}}</view>
					<dropdown class="input_drop" :list="genCheckersData" @onClick="dropCheckerChange"
						:current="selectedCheckerIndex"></dropdown>
				</view>

				<view class="input_lay">
					<view class="input_title">{{$t('login.checkAppliances')}}</view>
					<dropdown class="input_drop" :list="genCheckToolsData" @onClick="dropToolChange"
						:current="selectedToolIndex"></dropdown>
				</view>

				<view class="input_lay">
					<view class="input_title">{{$t('login.checkNo')}}</view>
					<dropdown class="input_drop" :list="genCheckNosData" @onClick="dropNoChange"
						:current="selectedNoIndex"></dropdown>
				</view>

				<button @click="nextStep" class="common-btn login-btn">{{$t('login.loginBtn')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tempLoginData from "@/common/login_data.js";
	import ssInput from "@/components/ss-input/ss-input.vue";

	import {
		requireAllLoginNoData,
		requireAllLoginAccountData,
		createLoginAccount
	} from "@/localService/loginService.js";

	import {
		mapState,
		mapMutations
	} from "vuex";

	export default {
		components: {
			ssInput,
		},

		computed: {
			genCheckersData() {
				let strs = [];
				this.loginData.checkerList.forEach((e) => {
					strs.push(e.txt_value);
				});
				return strs;
			},
			genCheckToolsData() {
				let strs = [];
				this.loginData.checkerTool.forEach((e) => {
					strs.push(e.name);
				});
				return strs;
			},
			genCheckNosData() {
				let strs = [];
				this.loginData.checkerNo.forEach((e) => {
					strs.push(e.txt_value);
				});
				return strs;
			},
		},

		data() {
			return {
				loginData: tempLoginData,
				selectedCheckerData: null,
				selectedToolData: null,
				selectedNoData: null,

				selectedCheckerIndex: 0,
				selectedToolIndex: 0,
				selectedNoIndex: 0,
			};
		},

		onReady() {
			console.log("login onReady");
			this.selectedCheckerData = this.loginData.checkerList[0];
			this.selectedToolData = this.loginData.checkerTool[0];
			this.selectedNoData = this.loginData.checkerNo[0];
		},

		onShow() {
			let _self = this;
			console.log("login onShow");
			uni.$on("dbLoaded", function(e){
				console.log("login onReady dbLoaded " , e)
				if (e) {
					_self .requireAllLoginAccountDataApi();
					_self .requireAllLoginNoDataApi();
				}
			});
			
			if (getApp().globalData.isDbLoaded) {
				this.requireAllLoginAccountDataApi();
				this.requireAllLoginNoDataApi();
			}
		},

		onHide() {
			console.log("login onHide");
		},

		methods: {
			...mapMutations(["login"]),
			/**
			 * 登录
			 */
			nextStep() {
				this.login(this.selectedCheckerData);
				uni.redirectTo({
					url: "/pages/selectFunction/selectFunction",
				});
			},

			onLoginSettingClick() {
				uni.navigateTo({
					url: "/pages/login/loginSetting",
				});
			},

			dropCheckerChange(e) {
				this.selectedCheckerIndex = e;
				this.selectedCheckerData = this.loginData.checkerList[e];
			},

			dropToolChange(e) {
				this.selectedToolIndex = e;
				this.selectedCheckerData = this.loginData.checkerTool[e];
			},

			dropNoChange(e) {
				this.selectedNoIndex = e;
				this.selectedCheckerData = this.loginData.checkerNo[e];
			},

			changeLang() {
				if (getApp().globalData.lang == "cn") {
					getApp().globalData.lang = "jp"
					this.$i18n.locale = "jp"
				} else {
					getApp().globalData.lang = "cn"
					this.$i18n.locale = "cn"
				}
			},

			requireAllLoginAccountDataApi() {
				requireAllLoginAccountData().then(e => {
					console.log("requireAllLoginAccountDataApi")
					console.log(e)
					this.loginData.checkerList = e;
				})
			},

			requireAllLoginNoDataApi() {
				requireAllLoginNoData().then(e => {
					console.log("requireAllLoginNoDataApi")
					console.log(e)
					this.loginData.checkerNo = e;
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.login_bg {
		width: 100vw;
		height: 100vh;
		background-image: url(/static/imgs/login/pic_bg@2x.png);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		box-sizing: border-box;
		

	}

	.login_lay {
		position: relative;
		width: 640rpx;
		height: 406rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		overflow: hidden;
		box-shadow: 0px 1px 16px 0px rgba(0,38,68,0.08);
		border-radius: 8rpx;
	}

	.left_lay {
		height: 100%;
		.login_img {
			width: 300rpx;
			height: 100%;
		}
	}

	.right_lay {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		box-sizing: border-box;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		

		.icon_set {
			position: absolute;
			top: 20rpx;
			right: 20rpx;

			image {
				width: 22rpx;
				height: 22rpx;
			}
		}

		.right_title {
			width: 250rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			box-sizing: border-box;
			color: rgba(0, 0, 0, 0.85);
		}

		.input_lay {
			.input_title {
				font-size: 10rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 11rpx;
				margin-bottom: 6rpx;
			}

			.input_drop {
				width: 250rpx;
			}
		}
	}
	
	.login-btn {
		width: 250rpx;
		height: 32rpx;
		background: #0062b0;
		border-radius: 1rpx;
		font-size: 12rpx;
		color: #ffffff;
		font-weight: 500;
		opacity: 1;
		margin-top: 20rpx;
	}
</style>
